import Vue from 'vue'
import Router from 'vue-router'
//作为vue的插件
Vue.use(Router)

import notFound from '@/components/404'

import home from '@/views/home'
import about from '@/views/about'
import document from '@/views/document'
import study from '@/views/study'
import work from '@/views/work'
import hobby from '@/views/hobby'
import user from '@/views/user'
import login from '@/views/login'

import slider from '@/views/slider'
/*
* export default 向外提供路由配置接口,ES6中的模块化语法
* new Router 创建router实例
* */
let router=new Router({

  //自定义router-link选中时的class值来自定义标签样式,全局配置
  linkActiveClass:'is-active',

  /*
   * SPA有一个缺点：无法在浏览器点击前进后退的时候记住滚动条的位置，我们可以通过滚动行为来解决这个问题
   *
   * 滚动行为
   *    to:要进入的目标路由对象
   *    from：离开的路由对象
   *    savePosition：记录滚动条位置的对象
   * */
  scrollBehavior(to,from,savePosition){//点击浏览器前进后退或者切换导航的时候触发
    if(savePosition){
      return savePosition;
    }else{
      return {x:0,y:0}
    }
  },

  //mode 改变路由模式，默认是hash模式(一般使用history模式,hash用于低版本兼容，使用history模式需要后台配合）
  // mode:'history',

  //routes ：配置具体路由信息
  routes: [
    // 根路径
    {
      path: '/',
      component:home,
      meta:{
        index:0,
        title:'home'
      }
    },

    // home
    {
      path: '/home',
      name:'home',
      component:home,
      alias:'/index',//别名
      meta:{
        index:0,
        title:'home'
      }
    },

    // document
    {
      path: '/document',
      name:'document',
      components:{
        default:document,//默认视图
        slider:slider,   //命名视图  渲染在<router-view name="slider"></router-view>这个地方
      },
      meta:{
        index:1
      },
      //给单个路由设置钩子函数
      beforeEnter(to,from,next){
        next(true);
      }
    },

    // about
    {
      path: '/about',
      //name:'about',//有默认子路由的时候，name应该设置到默认子路由中
      component:about,

      //子路由
      children:[
        {
          path:'',//默认子路由,path为空就可以了(/about)
          name:'about',
          component:study,
          //有子路由的时候，meta需要设置在默认的子路由中
          meta:{
            index:2
          },
        },

        {
          path:'work',//如果组件嵌套，路径不嵌套，可以使用/work相对于根路径即可
          name:'work',
          component:work
        },

        {
          path:'hobby',
          name:'hobby',
          component:hobby
        }
      ]
    },

    // user
    {
      // ?表示0个或多个
      path:'/user/:vip?/:id?',  //  /user/vip/1  /user/vip/2  /user/common/3  /user
      name:user,
      component:user,
      meta:{
        index:3,
        login:false//该导航需要登录之后才会跳转
      }
    },

    // login
    {
      path: '/login',
      name: 'login',
      component:login,
    },

    // 404
    {
      /**
       * 当路径没有对应的组件时，可以对应到指定的组件，或者定位到我们已经存在的某个的组件，一般是首页
       */
      path:'*',//*表示通配符

      // 指定404组件
      component:notFound,

      // 重定向
      // redirect:'/home',
      //redirect:{path:'./home'},
      //redirect:{name:'home'},

      /**
       * 动态设置重定向的目标，根据不同的目标路由对象信息，跳转到return后面的那个组件
       * to:目标路由对象
       */
      /*redirect:(to)=>{
        if(to.path==='/123'){
            return '/home';
        }else if(to.path==='/456'){
          return '/document'
        }else{
          return '/about'
        }
      }*/
    }
  ]
})

router.beforeEach(function (to,from,next){

  // next();         //调用next方法之后才会跳转到该路由
  // next(false);  //false 取消跳转

  //跳转路由之前进行判断，当login值为true时，说明该导航所对应的组件需登录才能显示
  if(to.meta.login){
    next('/login');
  }else{
    next();
  }
})

router.afterEach(function (to,from,next){
  if(to.meta.title){
    window.document.title=to.meta.title;
  }else{
    window.document.title='miaov';
  }
})

export default router;
